<template>
  <div class="countdown-container">
    <el-alert
        :title="displayText"
        type="info"
        :closable="false"
        show-icon
        effect="dark"
        style="color: #2c3e50"
        :class="{ 'warning': isWarning, 'danger': isDanger }"
    />
  </div>
</template>

<script setup>
import {ref, computed, onMounted, onUnmounted, watch} from 'vue'

// 定义props
const props = defineProps({
  // 总时间（分钟）
  totalTime: {
    type: Number,
    default: 120,
    validator: (value) => value > 0
  },
  // 是否自动开始
  autoStart: {
    type: Boolean,
    default: true
  }
})

// 定义emits
const emit = defineEmits(['timeUp', 'tick'])

// 响应式数据
const remainingSeconds = ref(props.totalTime * 60)
const timer = ref(null)
const isRunning = ref(false)

// 计算属性
const displayText = computed(() => {
  const minutes = Math.floor(remainingSeconds.value / 60)
  const seconds = remainingSeconds.value % 60
  return `剩余 ${minutes.toString().padStart(2, '0')} 分钟 ${seconds.toString().padStart(2, '0')} 秒`
})

// 警告状态（剩余5分钟）
const isWarning = computed(() => remainingSeconds.value <= 300 && remainingSeconds.value > 60)

// 危险状态（剩余1分钟）
const isDanger = computed(() => remainingSeconds.value <= 60 && remainingSeconds.value > 0)

// 方法
const start = () => {
  if (isRunning.value) return
  isRunning.value = true
  timer.value = setInterval(() => {
    if (remainingSeconds.value > 0) {
      remainingSeconds.value--
      emit('tick', remainingSeconds.value)
    } else {
      pause()
      emit('timeUp')
    }
  }, 1000)
}

const pause = () => {
  isRunning.value = false
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
}

const reset = (newTime = props.totalTime) => {
  pause()
  remainingSeconds.value = newTime * 60
}

const addTime = (minutes) => {
  remainingSeconds.value += minutes * 60
}

// 监听totalTime变化
watch(() => props.totalTime, (newVal) => {
  reset(newVal)
})

// 生命周期
onMounted(() => {
  if (props.autoStart) {
    start()
  }
})

onUnmounted(() => {
  pause()
})

// 暴露方法给父组件
defineExpose({
  start,
  pause,
  reset,
  addTime,
  remainingSeconds: readonly(remainingSeconds),
  isRunning: readonly(isRunning)
})
</script>

<style scoped>
.countdown-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: white;
  color: black;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-alert) {
  margin: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
}

:deep(.el-alert--info) {
  background-color: var(--el-color-info-light-9);
  border-color: var(--el-color-info-light-7);
}

:deep(.el-alert__title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.el-alert__icon) {
  font-size: 18px;
  margin-right: 8px;
}

/* 警告状态样式 */
.warning :deep(.el-alert) {
  background-color: var(--el-color-warning-light-9);
  border-color: var(--el-color-warning-light-7);
  color: var(--el-color-warning);
}

.warning :deep(.el-alert__icon) {
  color: var(--el-color-warning);
}

/* 危险状态样式 */
.danger :deep(.el-alert) {
  background-color: var(--el-color-danger-light-9);
  border-color: var(--el-color-danger-light-7);
  color: var(--el-color-danger);
  animation: pulse 1s infinite;
}

.danger :deep(.el-alert__icon) {
  color: var(--el-color-danger);
}

/* 脉冲动画 */
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
</style>
